<script setup lang="ts">
import { getBannerListAPI } from '@/api/home'
import type { GoodsItemType } from '@/types/goods'
import { onMounted } from 'vue'
import { reactive } from 'vue'
import { ref } from 'vue'
import { getGoodsListAPI2 } from '../../api/goods'

const images = ref<any>([])
const baseURL = import.meta.env.VITE_BASE_URL

// 底部横幅图
const poster = baseURL + '/uploads/poster.png'

const getBannerList = async () => {
  images.value = await getBannerListAPI()
}
onMounted(() => getBannerList())

const productList = ref<GoodsItemType[]>([])
// 获取商品列表
const getGoodsList = async () => {
  const res: any = await getGoodsListAPI2()
  productList.value = res
  console.log(productList.value)
}
onMounted(() => getGoodsList())
</script>

<template>
  <div class="h-200 w-full">
    <a-carousel
      :style="{
        width: '100%',
        height: '100%'
      }"
      auto-play
      show-arrow="hover"
    >
      <a-carousel-item
        @click="$router.push({ path: `/item/${Math.floor(Math.random() * 20 + 1)}` })"
        v-for="image in images"
      >
        <img class="w-full h-full object-cover cursor-pointer" :src="baseURL + image.url" />
      </a-carousel-item>
    </a-carousel>
  </div>

  <div class="bg-info pt-10">
    <div class="w-1280px mx-auto pb-40">
      <ProductShowList :list="productList.slice(0, 8)" title="新品 News" desc="专业 匠心" />

      <div class="mt-20">
        <ProductShowTitle title="推荐 Recommend" desc="爆款 热销" />
        <div class="mt-4">
          <GoodsList :goodsList="productList.slice(14, 22)" />
        </div>
      </div>

      <div class="mt-20">
        <div class="flex justify-between items-center">
          <h3 class="text-28px font-600">限时特价</h3>
          <RouterLink :to="{ path: '/list/0' }" class="text-lg text-warning font-600 cursor-pointer">
            点我查看更多！
          </RouterLink>
        </div>
        <div class="mt-4 flex gap-4">
          <div class="w-300px">
            <img
              @click="$router.push({ path: `/item/${Math.floor(Math.random() * 20 + 1)}` })"
              class="w-full h-full object-cover cursor-pointer"
              src="@/assets/img/home_poster.png"
              alt=""
            />
          </div>
          <div class="grid grid-cols-3 gap-4 flex-1">
            <GoodsItem v-for="goods in productList.slice(8, 14)" :key="goods.id" :goods />
          </div>
        </div>
      </div>

      <div class="mt-20">
        <img
          @click="$router.push({ path: `/item/${Math.floor(Math.random() * 20 + 1)}` })"
          class="cursor-pointer w-full object-cover h-150px"
          :src="poster"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.arco-carousel-arrow > div) {
  width: 44px;
  height: 44px;
  & > svg {
    color: #333;
    font-size: 26px;
  }
}
</style>
